<!-- subpkg_medicine/order_list/index.vue -->
<script lang="ts" setup>
  import { getOrderListAPI } from '@/api/order'
import type{ orderListParams, orderListRow } from '@/types/order'
import { onMounted, ref } from 'vue'
import { PAGE_PATH } from '@/constants'
  const feedTabs = ref([
    { label: '全部', rendered: true },
    { label: '待支付', rendered: false },
    { label: '待发货', rendered: false },
    { label: '待收货', rendered: false },
    { label: '已完成', rendered: false },
  ])
  const orderList = ref<orderListRow[]>([])
  const activeTab = ref(0)
  const statusMap = ['', '10', '11', '12', '13'] // 对应全部、待支付、待发货、待收货、已完成
  const loading = ref(false)

  const getOrderList = async () => {
    loading.value = true
    try {
      const params: orderListParams = {
        current: '1',
        pageSize: '10'
      }
      if (activeTab.value !== 0) {
        params.status = statusMap[activeTab.value]
      }
      const res = await getOrderListAPI(params)
      orderList.value = res?.data?.rows
    } catch (error) {
      // console.error('获取订单列表失败:', error)
      uni.showToast({
        title: '获取订单列表失败',
        icon: 'none'
      })
    } finally {
      loading.value = false
    }
  }

  const onTabChange = (index: number) => {
    activeTab.value = index
    getOrderList()
  }

  onMounted(() => {
    getOrderList()
  })
</script>

<template>
  <view class="medicine-page">
    <view class="order-status-tabs">
      <custom-tabs :list="feedTabs" @change="onTabChange"></custom-tabs>
    </view>
    <scroll-view
      refresher-enabled
      refresher-background="#f6f6f6"
      class="uni-scroll-view"
      scroll-y
    >
      <view class="order-list">
        <view class="order-list-item" v-for="item in orderList" :key="item.id">
          <view class="order-header">
            <text class="number">订单编号: {{item.orderNo}}</text>
            <text class="status">{{item.statusValue}}</text>
          </view>
          <navigator
            :url="`${PAGE_PATH.ORDER_DETAIL_PAGE}/${item.id}`"
            hover-class="none"
            class="order-body"
          >
            <view class="medicine" v-for="medicine in item.medicines" :key="medicine.id">
              <image
                class="medicine-cover"
                :src="medicine.avatar"
                mode="aspectFill"
              />
              <view class="medicine-info">
                <text class="name">{{medicine.name}}</text>
                <text class="unit symbol">{{medicine.specs}}片</text>
                <text class="price">¥{{medicine.amount}}</text>
              </view>
              <view class="quantity">x{{medicine.quantity}}</view>
            </view>
          </navigator>
          <view class="order-footer">
            <view class="total">共{{item.medicines.length}}件商品 合计：¥{{item.payment}} （运费¥{{item.expressFee}}）</view>
            <view class="buttons">
              <button class="uni-button minor">取消订单</button>
              <button class="uni-button">继续支付</button>
            </view>
          </view>
        </view>
        <!-- 加载状态 -->
        <uni-load-more
          status="loading"
          color="#C3C3C5"
          :icon-size="16"
          :content-text="{
            contentdown: '上拉显示更多',
            contentrefresh: '数据正在加载中',
            contentnomore: '没有更多数据了',
          }"
        />
      </view>
    </scroll-view>
  </view>
</template>

<style lang="scss">
  @import './index.scss';
</style>